import { WorkspacePanel, useXflowPrefixCls, uuidv4 } from '@antv/xflow'
import type { IPosition } from '@antv/xflow'
import { useGraphDnd } from './hooks/useGraphDnd'
import { Menu } from 'antd'
import { useAsync } from '@/hooks'
import { PlayBookService } from '@/service'
import { formatNode } from './utils'
import { useMemo, useState } from 'react'
import { Input, Select, InputGroup } from '@/components'
import { NODE_KEY } from '../../constants'
import styles from './index.module.less'
import FengJinIcon from '@/assets/svg/FengJin'

export interface IPanelProps {
  position: IPosition
}

const NodeCard = () => {
  const prefixClz = useXflowPrefixCls('node-panel')
  const { onMouseDown } = useGraphDnd()
  const { data } = useAsync(
    PlayBookService.queryNodeList,
    { /* name: '动作执行', */ category: '网络安全' },
    []
  )

  const NodeTreeData = useMemo(() => {
    return formatNode(data)
  }, [data])

  const [category, setCategory] = useState('all')
  const categoryOptions = useMemo(() => {
    return NodeTreeData.reduce(
      (prev, item) => {
        prev.push({ label: item.label, value: item.value })
        return prev
      },
      [{ label: '全部', value: 'all' }]
    )
  }, [NodeTreeData])
  const [command, setCommand] = useState('')
  const NodeTreeFilterData = useMemo(() => {
    let res = []
    // 过滤第二级
    res = NodeTreeData.map(categoryItem => {
      if (categoryItem.children) {
        return {
          ...categoryItem,
          children: categoryItem.children
            .filter(commandItem => commandItem.label.includes(command))
            .map(commandItem => ({
              ...commandItem,
              label: (
                <div
                  onMouseDown={onMouseDown({
                    id: uuidv4(),
                    label: commandItem.label,
                    renderKey: commandItem.renderKey,
                    data: commandItem.data,
                    width: commandItem.width,
                    height: commandItem.height
                  })}
                >
                  {commandItem.label}
                </div>
              )
            }))
        }
      }
      return categoryItem
    })
    // 再过滤类别
    res = res.filter(categoryItem => {
      return (
        (category === 'all' || categoryItem.value === category) &&
        categoryItem?.children?.length > 0
      )
    })
    // res = NodeTreeData.filter(categoryItem => {
    //   return categoryItem?.children?.length > 0
    // })
    return res
  }, [NodeTreeData, category, command])

  return (
    <div className={styles[prefixClz]}>
      <InputGroup compact className="node-search-container">
        <Select
          options={categoryOptions}
          allowClear={false}
          value={category}
          onChange={setCategory}
        ></Select>
        <Input
          value={command}
          onChange={e => {
            setCommand(e.target.value)
          }}
        />
      </InputGroup>
      <Menu mode="inline" items={NodeTreeFilterData} />
    </div>
  )
}

const NodePanel = (props: IPanelProps) => {
  return (
    <WorkspacePanel {...props}>
      <NodeCard />
    </WorkspacePanel>
  )
}

export default NodePanel
